<template>
	<div id="worksCenter">
		<!-- header -->
		<top title="历史文件"></top>
		<!-- list -->
		<div class="main">
			<van-checkbox-group v-model="checkBox">
				<div class="worksList" v-for="(items,key) in formData" :key="key">
					<div class="month wordsGray">{{items.time|toDay}}</div>
					<div class="imgList">
						<div class="worksImg" v-for="(item,index) in items.files" :key="index">
							<div class="imag">
								<img :src="item.url" height="100%" width="100%" v-if="item.type == 'image'">
								<img :src="item.coverPage" height="100%" width="100%" v-else>
							</div>
							<van-checkbox
								class="vcheckbox"
								:name="item"
								checked-color="#5E8EFE">
							</van-checkbox>
						</div>
					</div>
				</div>
			</van-checkbox-group>
			<none msg="暂无数据" v-if="formData.length==0"></none>
		</div>

		<!-- footer -->
		<div class="footer">
			<btn
				style="width: 88%;"
				title="发送至聊天组"
				color="#fff"
				bgcolor="#5E8EFE"
				@click.native="submit()">
			</btn>
			<!-- <btn title="下载" color="#fff" bgcolor="#5E8EFE"></btn> -->
		</div>
	</div>
</template>
<script>
import top from '@/components/title_bar/index.vue'
import btn from '@/components/performance/msgCenter/btn'
import {getHistory,toDate,getBase64Image} from '@/utils/chat.js'
import {getuserUid,getUserLogin,getUserInfo,getRole} from '@/utils/auth.js'
import none from "@/components/performance/msgCenter/none.vue";
import apiConfig from '@/api/index'
export default {
	components:{
		top,
		btn,
		none
	},
	data() {
		return {
			checkBox:[],
			formData: [
				// {
				// 	time: "昨天",
				// 	files: [
				// 		{
				// 			type:"image",
				// 			url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=277637819,392506811&fm=27&gp=0.jpg' ,
				// 		},
				// 		{
				// 			type:"image",
				// 			url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1122649470,955539824&fm=27&gp=0.jpg' ,
				// 		},
				// 		{
				// 			type:"video",
				// 			url: "/desk/test.mp4",
				// 			coverPage:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2955232307,1504740613&fm=117&gp=0.jpg"
				// 		}
				// 	],
				// },
			],
			selectData:[],

			//其他
			userId:"",
			index:0, //上传时的次步

			//toast
			toast:"",
		};
	},
	methods:{
		//加载中
		loading:function(msg){
			const toast = this.$toast.loading({
				duration: 0,
				mask: false,
				message: msg,
				forbidClick:true
			});
			return toast;
		},
		list:function(arr){
			console.log(arr);
			let currentFiles = []; //用来存当前群组下的文件
			let mainArr = []; //渲染的数组
			//把当前群组下的文件筛选出来
			if(arr){
				arr.map(o=>{
					if(o.groupId == this.$route.query.groupId){
						currentFiles = o.list;
					}
				})
				//渲染
				console.log(currentFiles);
				this.formData = currentFiles;
			}
		},
		//发送图片消息
		sendImg:function(){
			if(this.index < this.checkBox.length){
				var _this = this;
				console.log(this.checkBox);
				console.log("n:" + this.index);
				var path = this.checkBox[this.index].url;
				this.index++;
				var obj = getUserInfo();
				var timestamp = Date.parse(new Date()); //当前时间戳
				var ext = {
					title:this.$store.state.groupTitle,
					orderId:this.$route.query.orderId,
					type:'image',
					time:timestamp,
					name:obj.userName,
					photoUrl:obj.pictureUrl,
					roleId:getRole()?getRole():''
				};	
				//开始上传
				HTTP('msgImg',{
					roomType:'group',
					base64file:path,
					userUid:this.userId,
					groupUid:this.$route.query.groupId,
					ext:JSON.stringify(ext)
				})
				.then(res=>{
					if(res.code == 200){
						this.sendImg();
					}
					else{
						this.$toast(res.msg);
					}
				})
			}
			else{
				//跳转
				setTimeout(()=>{
					this.toast.clear();
					this.$router.replace({
						path:'/performance/chat',
						query:{
							id:this.$route.query.groupId,
							orderId:this.$route.query.orderId
						}
					});
				},3000)
			}
		},
		//提交
		submit:function(){
			if(this.checkBox.length == 0){
				this.$toast('请至少选择一个文件');
			}
			else{
				this.toast = this.loading('发送中');
				this.sendImg();
				// this.checkBox.map((o,n)=>{
				// 	this.index = n;
				// 	this.sendImg(o.url);
				// })
			}
		}
	},
	mounted:function(){
		console.log('测试 1');
	},
	created:function(){
		//获取userId
		if(getuserUid()){
			this.userId = getuserUid();
		}
		//缓存
		if(getHistory()){
			let arr = getHistory();
			this.list(arr);
		}
	},
	filters: {
		toDay: function(value) {
			//得到今天日期
			var timestamp = Date.parse(new Date());
			let time = toDate(timestamp,'yyyy-MM-dd');
			if(value == time){
				return '今天';
			}
			else{
				return value;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
#worksCenter {
  .header {
    background: $color-primary;
    color: #ffffff;
    .title {
      color: #ffffff;
    }
  }
  .main {
    padding: 0 0.24rem;
	margin-bottom: 2rem;
    .worksList {
		margin: 0.3rem 0;
      .imgList {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0.1rem;
        .worksImg {
          position: relative;
          .imag {
            width: 100%;
            height: 100%;
          }
          width: 1.68rem;
          height: 1.68rem;
          margin: 0.1rem 0.1rem 0 0;
          &:nth-child(4n) {
            margin-right: 0;
          }

          .vcheckbox {
            position: absolute;
            bottom: 0.06rem;
            right: 0.06rem;
          }
        }
      }
    }
    .nomore {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-top: 0.3rem;
      .say {
        text-align: center;
        color: #aaaaaa;
        z-index: 101;
        background: #f9f9f9;
      }
      .line {
        top: 0.15rem;
        height: 1px;
        width: 2rem;
        background: #e5e5e5;
      }
    }
  }
  //底部按钮
  .footer{
	  position: fixed;
	  right: 0;
	  bottom: 0;
	  width: 100%;
	  border-top: 1px solid #dedede;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  background-color: #FAFBFA;
	  height: 1.4rem;
	  box-shadow:0 -1px 4px #dedede;
	  button{
		  width: 42%;
		  outline: none;
		  border: none;
		  padding: 0.24rem 0;
		  margin: 0 8px;
		  border-radius: 3px;
		  transition: all 0.2s;
	  }
	  button:active{
		  opacity: 0.8;
		  transition: all 0.2s;
	  }
  }
}
</style>
